<template>
	<view>
		<view class="nav2">
			<u-navbar title="申请售后" bgColor="transparent" :fixed="false" autoBack>
			</u-navbar>
		</view>
		<view class="m30">
			<view class="bgFff radius30 p30">
				<view class="flex-jus f26">
					<text class="c999">订单号：{{detail.orderCode}}</text>
					<text class="c343">{{detail.createTime}}</text>
				</view>
				<u-gap height="10"></u-gap>
				<view class="flex flex-start">
					<u-image :src="api_host + detail.orderPro.icon" mode="" width="76px" height="76px"
						radius="5"></u-image>
					<view class="p10 ml10 flex1">
						<view class="c343 f28 bold">{{detail.orderPro.proName}}</view>
						<u-gap height="10"></u-gap>
						<view>
							<view class="flex-jus f24 c999 mb10" v-for="(item,index) in detail.orderDetails"
								:key="index">
								<text>{{item.name}} x{{item.buyCount}}</text>
								<text>¥ {{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-gap height="10"></u-gap>
			<view class="bgFff radius30 p30">
				<view class="flex-jus" @click="show_reason = true">
					<view class="pore title-text">
						<text class="c343 f26 bold">申请原因</text>
					</view>
					<view class="flex ml30">
						<text class="f26 mr20" :class="reason.name?'c343':'c999'">{{reason.name || '请填写申请售的原因'}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line color="#eee" margin="20rpx 0"></u-line>
				<view class="pore title-text">
					<text class="bold f26 c343">问题描述</text>
				</view>
				<u-gap height="10"></u-gap>
				<view>
					<u--textarea v-model="remark" placeholder="请描述你遇到的问题" height="200rpx" count border="surround"
						maxlength="50"></u--textarea>
				</view>
				<u-gap height="10"></u-gap>
				<view class="pore title-text">
					<text class="bold f26 c343">上传凭证</text>
					<text class="f24 c343">（最多9张）</text>
				</view>
				<u-gap height="10"></u-gap>
				<view class="">
					<u-upload :fileList="imgList" @afterRead="imgList" @delete="deletePic" name="1" multiple :maxCount="9"></u-upload>
				</view>
			</view>
			<u-gap height="30"></u-gap>
			<view>
				<u-button color="#FFD955" :customStyle="{'color':'#34314F','height':'80rpx'}" shape="circle"
					@click="show_action = true">提交至客服</u-button>
			</view>
			<u-gap height="20"></u-gap>
		</view>
		<!-- //申请原因 -->
		<u-popup :show="show_reason" @close="show_reason = false" mode="center" @open="show_reason = true" closeable
			round="20" :customStyle="{'width':'80%'}">
			<view class="p30">
				<view class="c343 bold">申请原因</view>
				<u-gap height="20"></u-gap>
				<view class="">
					<u-radio-group v-model="modal_reasonIndex" placement="column">
						<u-radio :customStyle="{margin: '8px 0'}" labelSize="14" activeColor="#FFDE6D"
							v-for="(item, index) in reasonList" :key="index" :label="item.name" :name="index">
						</u-radio>
					</u-radio-group>
				</view>
				<u-gap height="20"></u-gap>
				<view class="flex-au">
					<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx','width':'40%'}"
						shape="circle" @click="reasonConfirm">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-modal :show="show_action" title="评价成功" content="服务很棒，分享给好友！">
			<view class="flex-jus" slot="confirmButton">
				<view class="flex1">
					<view class="mr20">
						<u-button color="#f7f7f7" :customStyle="{'color':'#111','height':'80rpx'}"
							shape="circle">取消</u-button>
					</view>
				</view>
				<view class="flex1">
					<view class="ml20">
						<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx'}"
							shape="circle">去分享</u-button>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {getOrderdetail} from '@/common/api_order.js'
	export default {
		name: '',
		data() {
			return {
				detail:{},
				reasonList: [{
						name: '投诉服务人员',
						value: 1
					},
					{
						name: '服务价格问题',
						value: 2
					},
					{
						name: '服务质量不好，未达预期',
						value: 3
					},
					{
						name: '其他建议',
						value: 4
					}
				],
				remark: '',
				reason: {},
				imgList:[],
				modal_reasonIndex: 0,
				show_reason: false,
				show_action: false
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getOrderdetail()
		},
		methods: {
			reasonConfirm() {
				this.reason = this.reasonList[this.modal_reasonIndex]
				this.show_reason = false
			},
			// 删除图片
			deletePic(event) {
				this.imgList.splice(event.index, 1)
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.imgList.length
				lists.map((item) => {
					this.imgList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$utils.uploadFile(lists[i].url)
					if (result.code == 200) {
						let item = this.imgList[fileListLen]
						this.imgList.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: this.api_host + result.full_url,
							api_url: result.full_url
						}))
						fileListLen++
					}
				}
			},
			async getOrderdetail() {
				uni.showLoading({
					mask: true
				})
				const res = await getOrderdetail({
					id: this.id
				})
				if (res.code == 200) {
					this.detail = res.data
					const {
						dictDatas
					} = this.detail
					this.tagList = dictDatas.map(item => {
						return {
							...item,
							checked: false
						}
					})
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}

	.tag_item {
		padding: 10rpx 30rpx;
		border: 1px solid transparent;
	}

	.active {
		color: #FF7F1C;
		background-color: #FFFAF5;
		border-color: #FF7F1C;
	}

	.title-text {
		line-height: 28rpx;
	}

	.title-text::before {
		content: '';
		position: absolute;
		left: -30rpx;
		top: 2rpx;
		height: 13px;
		width: 2px;
		background-color: #FFDE6D;
	}
</style>